<template>
  <view class="container">
    <view class="main">
      <view class="timer">
        <text class="timer-text" style="color: #ffffff">计时器</text>
      </view>
      <view class="section workout">
        <text class="time">{{ workoutTimeFormat }}</text>
      </view>
      <view class="section rest">
        <text class="time" style="color: #ffffff">{{ restTimeFormat }}</text>
      </view>
      <view class="section cycle">
        <text class="cycle-text">循环 {{ cyclesLeft }}/{{ setcyclesLeft }}</text>
      </view>
    </view>
    <view class="settings">
      <view class="setting-item">
        <text class="setting-label">锻炼时间(秒)</text>
        <input class="setting-input" type="number" v-model="setworkoutTime" @input="updateWorkoutTime" />
      </view>
      <view class="setting-item">
        <text class="setting-label">休息时间(秒)</text>
        <input class="setting-input" type="number" v-model="setrestTime" @input="updateRestTime" />
      </view>
      <view class="setting-item">
        <text class="setting-label">循环次数</text>
        <input class="setting-input" type="number" v-model="setcyclesLeft" @input="updateCyclesLeft" />
      </view>
    </view>
    <view class="footer">
      <button class="circle-button reset-button" @tap="resetTimer">
        重置
      </button>
      <button class="circle-button start-button" @tap="toggleTimer">
        {{ isRunning ? "暂停" : "开始" }}
      </button>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      workoutTime: 3,
      restTime: 3,
      cyclesLeft: 3,
      zq: 4,
      isWorkout: true,
      isRunning: false,
      interval: null,
      setworkoutTime: 0,
      setrestTime: 0,
      setcyclesLeft: 0,
    };
  },
  created() {
    this.initializeValues();
  },
  beforeDestroy() {
    // 组件销毁前清理定时器
    this.stopTimer();
  },
  computed: {
    workoutTimeFormat() {
      return this.formatTime(this.workoutTime);
    },
    restTimeFormat() {
      return this.formatTime(this.restTime);
    },
  },
  methods: {
    initializeValues() {
      this.setworkoutTime = 0;
      this.setrestTime = 0;
      this.setcyclesLeft = 0;
      this.workoutTime = this.setworkoutTime;
      this.restTime = this.setrestTime;
      this.cyclesLeft = this.setcyclesLeft;
    },
    formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = time % 60;
      return `${minutes < 10 ? "0" + minutes : minutes}:${
        seconds < 10 ? "0" + seconds : seconds
      }`;
    },
    updateTime() {
      if (!this.isRunning) return; // 如果不在运行状态，直接返回

      if (this.isWorkout) {
        this.workoutTime--;
        if (this.workoutTime === 0) {
          this.handlePeriodEnd();
        }
      } else {
        this.restTime--;
        if (this.restTime === 0) {
          this.handlePeriodEnd();
        }
      }
    },
    handlePeriodEnd() {
      if (!this.isRunning) return; // 防止重复触发
      uni.vibrateLong();
      this.switchMode();
      if (this.isWorkout) {
        this.workoutTime = this.setworkoutTime;
      } else {
        this.restTime = this.setrestTime;
        this.updateCycles();
      }
    },
    updateCycles() {
      this.cyclesLeft--;
      if (this.cyclesLeft === 0) {
        this.stopTimer();
      }
    },
    switchMode() {
      this.isWorkout = !this.isWorkout;
    },
    toggleTimer() {
      uni.vibrateLong();
      if (this.isRunning) {
        this.stopTimer();
      } else {
        this.startTimer();
      }
    },
    startTimer() {
      if (this.cyclesLeft === 0) return;
      this.isRunning = true;
      // 清除可能存在的旧定时器
      if (this.interval) {
        clearInterval(this.interval);
      }
      this.interval = setInterval(this.updateTime, 1000);
    },
    stopTimer() {
      if (this.interval) {
        clearInterval(this.interval);
        this.interval = null;
      }
      this.isRunning = false;
    },
    updateWorkoutTime() {
      this.workoutTime = this.setworkoutTime;
    },
    updateRestTime() {
      this.restTime = this.setrestTime;
    },
    updateCyclesLeft() {
      this.cyclesLeft = this.setcyclesLeft;
    },
    resetTimer() {
      this.stopTimer();
      this.initializeValues();
      this.isRunning = false;
    },
  },
};
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #ffffff;
}

.main {
  /* flex: 4; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.timer {
  background-color: #000;
  color: #ffffff;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
}

.timer-text {
  font-size: 60rpx;
  color: #000000;
  font-weight: bold;
}

.section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
}

.workout {
  background-color: #ffffff;
}

.rest {
  background-color: #000000;
  color: #ffffff;
}

.cycle {
  background-color: #ffffff;
}

.text {
  font-size: 60rpx;
  color: #000000;
  font-weight: bold;
}

.time {
  font-size: 120rpx;
  color: #000000;
  font-weight: bold;
}

.cycle-text {
  font-size: 80rpx;
  color: #000000;
  font-weight: bold;
}

.settings {
  padding: 40rpx;
  background-color: #000000;
  box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.2);
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.setting-label {
  font-size: 60rpx;
  color: #e0e0e0;
  font-weight: 900;
}

.setting-input {
  width: 160rpx;
  height: 80rpx;
  background-color: #424242;
  border: none;
  border-radius: 20rpx;
  padding: 0 30rpx;
  font-size: 48rpx;
  color: #e0e0e0;
  text-align: center;
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1), 0 15rpx 30rpx rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
}

.setting-input:focus {
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2), 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
}

.footer {
  flex: 1;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
  justify-content: space-around;
}

.circle-button {
  width: 150rpx;
  height: 150rpx;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
  color: #000000;
  font-weight: bold;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2), 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
  margin: 0 20rpx;
}

.circle-button:active {
  box-shadow: 0 15rpx 30rpx rgba(0, 0, 0, 0.3), 0 30rpx 60rpx rgba(0, 0, 0, 0.4);
}

.reset-button {
  background-color: #ffffff;
}

.start-button {
  background-color: #ffffff;
}
</style>


